<template>
  <div class="dialog">
    <el-form :model="form" ref="ruleForm" :rules="rules">
      <div class="tan_k">
        <div>
          <div class="info_l_head">
            <div>个人基本资料</div>
            <el-divider></el-divider>
          </div>
          <div>
            <div class="info_l" style="float: left">
              <div class="form-row">
                <div class="form-col">
                  <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                  <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="籍贯" :label-width="formLabelWidth">
                    <el-select
                        class="form_select"
                        v-model="form.native"
                        placeholder="请选择籍贯"
                    >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="婚姻状况">
                    <el-radio-group v-model="form.marital">
                      <el-radio class="info_sel_r_groupn" label="已婚"/>
                      <el-radio class="" label="未婚" name="1"/>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="证件类型" :label-width="formLabelWidth">
                    <el-select
                        class="form_select"
                        v-model="form.nation"
                    >
                      <el-option label="身份证" value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="form-col" style="margin-left: 15px">
                  <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.sex">
                      <el-radio class="info_sel_r_groupn" label="男"/>
                      <el-radio class="" label="女" name="1"/>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="出生日期" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="form.birthday"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="民族" :label-width="formLabelWidth">
                    <el-select
                        class="form_select"
                        v-model="form.nation"
                        placeholder="请选择民族"
                    >
                      <el-option label="汉族" value="汉族"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="证件号码" :label-width="formLabelWidth">
                    <el-input v-model="form.identity" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="form-col" style="margin-left: 15px">
                  <el-form-item label="会员级别?" :label-width="formLabelWidth">
                    <el-select
                        class="form_select"
                        v-model="form.nation"
                        placeholder="请选择民族"
                    >
                      <el-option label="vip1" value="1"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="会员卡号?" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="数据来源?" :label-width="formLabelWidth">
                    <el-select v-model="form.status" placeholder="有效">
                      <el-option
                          v-for="item in options2"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="最近检?" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="form.birthday"
                        type="date"
                        placeholder="最近检测时间">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="个人状态?" :label-width="formLabelWidth">
                    <el-select v-model="form.status" placeholder="有效">
                      <el-option label="正常" value="1">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="form-col" style="margin-left: 15px">
                  <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                  >
                    <img
                        class="info_sel_r_img"
                        src="../../assets/img/img.jpg"
                        alt=""
                    />
                  </el-upload>
                </div>
              </div>
              <div class="form-row">
                <el-form-item label="现居地址" :label-width="formLabelWidth">
                  <el-input v-model="form.address" ></el-input>
                </el-form-item>
                <el-form-item label="工作单位" :label-width="formLabelWidth">
                  <el-input v-model="form.unit"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                  <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
              </div>
              <div class="form-row">
                <div class="form-col">
                  <el-form-item label="二级部门?" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="职称" :label-width="formLabelWidth">
                    <el-input v-model="form.duty" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="文化程度?" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="form-col">
                  <el-form-item label="职务？" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱？" :label-width="formLabelWidth">
                    <el-input v-model="form.duty" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="职业类别？" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>

                </div>
                <div class="form-col">
                  <el-form-item label="诊疗ID？" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
<!--                      <el-form-item label="创建时间？" :label-width="formLabelWidth">-->
<!--                        <el-date-picker-->
<!--                            v-model="value1"-->
<!--                            type="date"-->
<!--                            placeholder="选择日期">-->
<!--                        </el-date-picker>-->
<!--                      </el-form-item>-->
<!--                      <el-form-item label="创建人？" :label-width="formLabelWidth">-->
<!--                        <el-input v-model="form.name" autocomplete="off"></el-input>-->
<!--                      </el-form-item>-->
                </div>
                <div class="form-col">
                  <el-form-item label="课题人员？" prop="chineseName" :label-width="labelwidth">
                    <el-checkbox v-model="form.checked"></el-checkbox>
                  </el-form-item>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default {
  data() {
    return {
      dialogFormVisible: true,
      form: {},
      formLabelWidth: '80px',
      formInline: {},
    }
  }

}
</script>

<style scoped>

.dialog {

}

/*  */

.el-select {
  width: 300px;
}

.el-select /deep/ .el-input__inner {
  width: 100%;
}

::v-deep .input_c .el-input__inner {
  width: 100%;
}

::v-deep .el-dialog__body {
  border-bottom: 1px solid #cccccc;
  margin: 0 20px;
  padding: 20px 20px 0px;
  /* padding: 20px; */
}



.info_sel_r_groupn {
  margin-left: 40px;
}

.form-row {
  overflow: hidden;
}
.form-col {
  float: left;
}


.info_sel_r_img {
  width: 180px;
  height: 220px;
  margin: 0px auto;
}

.avatar-uploader {
  margin: 0px auto;
  text-align: center;
}

.info_l /deep/ .el-select {
  width: 100%;
}

.info_l_head {
}

.el-table th > .cell {
  white-space: nowrap;
}


.tan_k {
  display: flex;
  justify-content: space-between;
}

.textarea {
  width: 350px;
  height: 120px;
}

.el-textarea /deep/ .el-textarea__inner {
  min-height: 89px;
  height: 89px;
}




.add_jian > span {
  display: block;
  color: #3298D3;
  font-size: 8px;
  line-height: 24px;
}

::v-deep .el-dialog__body {
  border: 0px;
}

.dialog /deep/ .el-dialog {
  margin-top: 3vh !important;
}
</style>